<template>
  <!-- 广告添加 -->
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="150px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="广告名称" prop="name">
            <el-input v-model="form.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input v-model="form.desc" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Ios平台显示" prop="ios">
            <el-radio-group v-model="form.ios">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Android平台显示" prop="android">
            <el-radio-group v-model="form.android">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="跳转类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" clearable @change="handleChange">
              <el-option
                v-for="(item,index) in jumpType"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- H5链接 -->
        <el-col :span="24">
          <el-form-item label="H5链接" v-if="form.type == 1" prop="json_data">
            <el-input v-model="form.json_data" clearable />
          </el-form-item>
        </el-col>
        <!-- 选择week -->
        <el-col :span="24">
          <el-form-item label="week" v-if="form.type == 100" prop="json_data">
            <el-input v-model="form.json_data" clearable />
          </el-form-item>
        </el-col>
        <!-- 选择商品 -->
        <el-col :span="24">
          <el-form-item label="选择商品" v-if="form.type == 2" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择商品分类 -->
        <el-col :span="24">
          <el-form-item label="选择商品分类" v-if="form.type == 5" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择项目 -->
        <el-col :span="24">
          <el-form-item label="选择项目" v-if="form.type == 6" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择项目分类 -->
        <el-col :span="24">
          <el-form-item label="选择项目分类" v-if="form.type == 7" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择服务 -->
        <el-col :span="24">
          <el-form-item label="选择服务" v-if="form.type == 30" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择会员卡 -->
        <el-col :span="24">
          <el-form-item label="选择会员卡" v-if="form.type == 31" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 邀请有你选择 -->
        <el-col :span="24">
          <el-form-item label="选择活动" v-if="form.type == 26" prop="json_data">
            <!-- :remote-method="remoteMethod" remote -->
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="有效期" width="236" prop="dates" class="red">
            <el-date-picker
              v-model="dates"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上架状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="2">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="image" label="上传图片">
            <!-- <newUpload
              ref="uploadImg2"
              :file-num="fileNum2"
              :file-list="fileList2"
              :width="imgWeith2"
              :height="imgHeight2"
            />-->
            <newUpload
              ref="uploadImg"
              :fileNum="1"
              :file-list="fileList"
              :width="imgWeith"
              :height="imgHeight"
            ></newUpload>
            <p>图片上传大于1080*1920</p>
            <!-- <newUpload ref="uploadImg" :fileNum="1" :file-list="fileList" :size-number="2"></newUpload> -->
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <div class="allCenter">
              <el-button type="primary" @click="submit('form')">提交</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { selectList, add, allType, invitedList } from "@/api/advertisingMange";
import newUpload from "@/components/imgUpload/shopImgUp1";
export default {
  components: { newUpload },
  data() {
    return {
      form: {
        name: "",
        desc: "",
        ios: "",
        android: "",
        type: "",
        json_data: "",
        start_time: "",
        end_time: "",
        image: "",
        status: ""
      },
      dates: [],
      jumpType: [], //跳转类型
      shopType: [], //选择商品
      fileList: [],
      jump_id: "", //商品/项目/h5分类id
      imgWeith: 1080,
      imgHeight: 1920,
      rules: {
        name: [{ required: true, message: "请填写广告名称" }],
        ios: [{ required: true, message: "请勾选是否显示" }],
        android: [{ required: true, message: "请勾选是否显示" }],
        type: [
          { required: true, message: "请选择跳转类型", trigger: "change" }
        ],
        json_data: [
          {
            required: true,
            message: "请输入配置信息",
            trigger: ["blur", "change"]
          }
        ],
        // dates: [{ required: true, message: "请选择有效期", trigger: "blur" }],
        image: [{ required: true, message: "请上传图片" }]
      }
    };
  },
  watch: {},
  created() {
    this.getType();
  },
  methods: {
    // 获取所有跳转类型
    getType() {
      allType()
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.data.forEach(item => {
              arr.push({
                name: item.name,
                id: item.id
              });
              this.jumpType = arr;
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 跳转类型切换
    handleChange(e) {
      // console.log("e", e);
      this.form.json_data = "";
      let data = { type: e };
      if (e == 26) {
        let obj = { json_data: e };
        invitedList(obj)
          .then(res => {
            if (res.data.code == 200) {
              console.log("res", res.data.data);
              let arr = [];
              res.data.data.forEach(item => {
                arr.push({
                  label: item.activity_name,
                  id: item.id,
                  value: item.id
                });
              });
              this.shopType = arr;
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(err => {
            this.errorStatus(err.msg);
          });
      } else if (data) {
        selectList(data)
          .then(res => {
            if (res.data.code == 0) {
              let arr = [];
              res.data.data.forEach(item => {
                arr.push({ label: item.name, id: item.id, value: item.id });
              });
              this.shopType = arr;
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(err => {
            this.errorStatus(err.msg);
          });
      }
    },
    // 远程搜索
    remoteMethod(query) {
      let data = { keyword: query, type: this.form.type };
      if (query !== "") {
        selectList(data).then(res => {
          if (res.data.code == 0) {
            let arr = [];
            res.data.data.forEach(item => {
              arr.push({ label: item.name, id: item.id, value: item.id });
            });
            this.shopType = arr;
            // console.log("shop", this.shopType);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      } else {
        // console.log(999);
        this.form.json_data = "";
        let data = { type: this.form.type };
        selectList(data).then(res => {
          if (res.data.code == 0) {
            // console.log(666);
            let arr = [];
            res.data.data.forEach(item => {
              arr.push({ label: item.name, id: item.id, value: item.id });
            });
            this.shopType = arr;
            // console.log("888", this.shopType);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      }
    },
    // 下拉数据获取id
    handleChange1(e) {
      this.jump_id = e;
    },
    submit(form) {
      this.form.start_time = this.dates[0];
      this.form.end_time = this.dates[1];
      this.form.image = this.$refs.uploadImg.submitUpload()[0];
      this.jump_id =
        this.form.type == 0 || this.form.type == 1 || this.form.type == 100
          ? ""
          : this.jump_id;
      // let datas = { ...this.form };
      let datas = {
        name: this.form.name,
        desc: this.form.desc,
        ios: this.form.ios,
        android: this.form.android,
        type: this.form.type,
        json_data: JSON.stringify({ id: this.form.json_data }),
        start_time: this.form.start_time,
        end_time: this.form.end_time,
        image: this.form.image,
        status: this.form.status,
        jump_id: this.jump_id
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          add(datas)
            .then(res => {
              if (res.data.code == 200) {
                this.succStatus("添加成功");
                this.$router.push("/advertisingList");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(err => {
              this.errorStatus(err.msg);
            });
        }
      });
    },
    // // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    }
  }
};
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.allCenter {
  margin-left: 130px;
}
</style>